<template>
  <comcard>
    <div slot="com_header">管理员个人信息</div>

    <div slot="com_con">
      <span>管理员ID:{{ user.id }}</span>
      <el-divider></el-divider>
      <span>账号:{{ user.account }}</span>
      <el-divider></el-divider>
      <span>用户组:{{ user.userGroup }}</span>
      <el-divider></el-divider>
      <span>创建时间:{{ user.ctime | timeMF }}</span>
      <el-divider></el-divider>
      <span>管理员头像</span>
      <br>
      <br>
      <!-- <el-image
          style="width: 100px; height: 100px"
          :src="user.imgUrl"
        ></el-image> -->
      <el-upload
        class="avatar-uploader"
        action="http://localhost:5000/users/avatar_upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <hr>

      <el-button type="primary" size="small" @click="save()">修改头像</el-button>
    </div>
     
  </comcard>
</template>

<script>
import comcard from "../../components/card";

import { api_info,api_update_img } from "../../api/users";
// import { api_query } from '../../api/goodsType';
export default {
  components: {
    comcard,
  },
  data() {
    return {
      user: {
        Id: "",
        ctime: "",
        account: "",
        userGroup: "",
        imgUrl: "",
      },
      imageUrl:'',
      srcurl:''

    };
  },
  mounted() {
    this.query();
  },
  methods: {
   async save(){
     
      let rst =await api_update_img({imgUrl:this.srcurl})
      console.log(rst);
      let{code,msg}=rst
      if(code==0){
      this.$message.success(msg)
      // location.reload()
      this.$bus.$emit('img',this.imageUrl)
      }
      // let obj= this.$local.get("accountInfo");
      //  obj.imgUrl=this.imageUrl;
      //  this.$local.set("accountInfo",obj);
      
    },

    async query() {
      let rst = await api_info();
      this.user = rst.accountInfo;
      this.imageUrl=this.user.imgUrl
      console.log(rst);
      console.log(this.user);
      console.log(this.user.imgUrl);
    },


      //提交成功
     handleAvatarSuccess(res, file) {
       this.srcurl=res.imgUrl
        this.imageUrl = `http://localhost:5000/upload/imgs/acc_img/${res.imgUrl}`;
        console.log(res);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' ;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  },
};
</script>

<style lang="less" scoped>

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>